<template>
<div class="FaultStatistics">
    <echart :options="option" class="echarts"> </echart>
            <table>
                <thead>
                    <tr>
                        <th>系统名称</th>
                        <th>故障数量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in sysFaultData">
                      <td>{{item.sysName}}</td>
                      <td>{{item.faultNum}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
</template>

<style scoped>
.FaultStatistics {
  background-color: #0d2a42;
}

.echarts {
  position: relative;
  top:8%;
  border-radius: 4px;
  height: 500px;
  width: 100%;
}
table tr th {
  color: white;
  background-color: #134458;
  border-right: 1px solid #4ab8bf;
  border-bottom: 0px solid #4ab8bf;
  padding: 5px;
}
table td {
  color: #4ab8bf;
  background-color: #0a2732;
  border-top: 0;
  border-left: 0;
  border-right: 1px solid #4ab8bf;
  border-bottom: 1px solid #4ab8bf;
  padding: 5px;
  font-size: 15px;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr th:last-child{
    border-right: 0;
}
table tr td:last-child {
  border-right: 0;
}

table {
  border: 0px;
  width: 60%;
  min-height: 25px;
  line-height: 25px;
  border-collapse: collapse;
  padding: 2px;
  text-align: left;
  margin:auto;
  margin-top: 18%;
}
</style>


<script>
function roundDatas(num) {
  var datas = [];
  for (var i = 0; i < num; i++) {
    datas.push({
      name: "circle" + i
    });
  }
  return datas;
}

export default {
  data: function() {
    return {
      sysFaultData: [
        { sysName: "EMCS", faultNum: "45" },
        { sysName: "FAS", faultNum: "50" },
        { sysName: "PSCADA", faultNum: "55" },
        { sysName: "CCTV", faultNum: "25" },
        { sysName: "PA", faultNum: "30" },
        { sysName: "ATS", faultNum: "5" },
        { sysName: "PSD", faultNum: "40" }
      ],

      option: {
        title: {
          text: "CIOS系统",
          subtext: "故障统计",
          top: "center",
          left: "center",
          textStyle: {
            fontSize: 20,
            color: "#ffffff",
            fontWeight: "normal"
          },
          subtextStyle: {
            fontSize: 20,
            color: "#ffffff",
            fontWeight: "normal"
          }
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        roam: false, //鼠标缩放及平移
        focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点

        series: [
          {
            name: "",
            type: "pie",
            startAngle: 0,
            hoverAnimation: false,
            radius: ["60%", "60%"],
            center: ["50%", "50%"],
            data: [
              {
                name: "PIS乘客信息",
                value: 25
              },
              {
                name: "PA广播",
                value: 30
              },
              {
                name: "AFC售检票",
                value: 35
              },
              {
                name: "PSD站台门",
                value: 40
              },
              {
                name: "EMCS机电",
                value: 45
              },
              {
                name: "FAS火灾",
                value: 50
              },
              {
                name: "PSCADA电力",
                value: 55
              }
            ],
            itemStyle: {
              normal: {
                color: "#ffffff",
                borderWidth: 15,
                borderColor: "rgba(0,0,0,0)",
                label: {
                  show: true,
                  formatter: "{b}\n故障数：{c}个({d}%)",
                  normal: {
                    textStyle: {
                      fontFamily: "宋体",
                      color: "#ffffff",
                      fontSize: 20
                    }
                  }
                },
                labelLine: {
                  show: true,
                  length: 90,
                  lineStyle: {
                    color: "#7C9ECD"
                  }
                }
              }
            }
          },
          {
            type: "graph",
            tooltip: {},
            ribbonType: true,
            layout: "circular",
            hoverAnimation: false,
            width: "100%",
            height: "100%",
            circular: {
              rotateLabel: true
            },
            symbolSize: 1,
            data: roundDatas(300),
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                color: "#58446C"
              },
              emphasis: {
                label: {
                  show: false
                }
              }
            }
          },
          {
            type: "graph",
            tooltip: {},
            ribbonType: true,
            layout: "circular",
            width: "60%",
            height: "60%",

            circular: {
              rotateLabel: true
            },
            symbolSize: 30,
            label: {
              normal: {
                position: "center",
                formatter: "{b}\n故障数：{c}个",
                normal: {
                  textStyle: {
                    fontFamily: "宋体",
                    color: "#ffffff",
                    fontSize: 18
                  }
                }
              }
            },

            edgeSymbol: ["circle"],
            edgeSymbolSize: [8, 10],
            edgeLabel: {
              normal: {
                textStyle: {
                  fontSize: 18,
                  fontWeight: "bold",
                  color: "#ffffff",
                  fontFamily: "宋体"
                }
              }
            },

            itemStyle: {
              normal: {
                label: {
                  rotate: true,
                  show: false,
                  textStyle: {
                    color: "#ffffff",
                    fontSize: 20
                  }
                },
                //borderColor: '#7C9ECD',
                borderWidth: 3
              },
              emphasis: {
                label: {
                  show: false
                }
              }
            },

            data: [
              {
                name: "PIS子系统",
                symbolSize: 65,
                value: 25,
                itemStyle: {
                  normal: {
                    color: "#2D7CCB"
                  }
                }
              },
              {
                name: "PA广播",
                symbolSize: 70,
                value: 30,
                itemStyle: {
                  normal: {
                    color: "#2D7CCB"
                  }
                }
              },
              {
                name: "AFC售检票",
                symbolSize: 75,
                value: 35,
                itemStyle: {
                  normal: {
                    color: "#2D7CCB"
                  }
                }
              },
              {
                name: "PSD站台门",
                symbolSize: 80,
                value: 40,
                itemStyle: {
                  normal: {
                    color: "#2D7CCB"
                  }
                }
              },
              {
                name: "EMCS机电",
                symbolSize: 85,
                value: 45,
                itemStyle: {
                  normal: {
                    color: "#2D7CCB"
                  }
                }
              },
              {
                name: "FAS火灾",
                symbolSize: 90,
                value: 50,
                itemStyle: {
                  normal: {
                    color: "#2D7CCB"
                  }
                }
              },
              {
                name: "PSCADA电力",
                symbolSize: 95,
                value: 55,
                itemStyle: {
                  normal: {
                    color: "#2D7CCB"
                  }
                }
              }
            ]
          }
        ]
      }
    };
  }
};
</script>



